// 裂图功能组件
import React from 'react';

// 定义组件的属性接口
interface BreakOpenProps {
    src: string; // 图片的源 URL
    alt?: string; // 图片的替代文本（可选）
}

// 定义 BreakOpen 组件
const BreakOpen: React.FC<BreakOpenProps> = ({ src, alt = "加载失败" }) => {
    // 替换为图片加载失败时显示的裂图链接
    const crackedImage = "https://tse1-mm.cn.bing.net/th/id/OIP-C.aENmhjePh3GWOV_Z75sVUAAAAA?w=171&h=180&c=7&r=0&o=5&pid=1.7";

    return (
        <img 
            src={src} // 图片源
            onError={(e) => { 
                // 当图片加载失败时，替换为裂图
                (e.target as HTMLImageElement).src = crackedImage 
            }} 
            alt={alt} // 图片替代文本
            // style={{ width: '100%', height: 'auto', objectFit: 'cover' }} // 可选：调整图片样式
        />
    );
};


export default BreakOpen;
